<template>
  <el-card style="margin-bottom: 20px;margin-top: 0;">
    <div slot="header" class="me-tag-header">
      <span>安全教育资源</span>
      <a @click="moreTags('security')" class="me-pull-right me-tag-more moreList">更多</a>
    </div>
    <ul class="me-tag-list">
      <li class="me-tag-item" v-for="(item,index) in articlesList" :key="index">
        <a @click="toInfo(item.id,'security')"  >
          <img :src="item.coverFiles[0].url" style="width: 260px;height: 140px;" :alt="item.coverFiles[0].name">
        </a>
        <a @click="toInfo(item.id,'security')" :title="item.title" >
          <span >
            {{ item.title.length > 17 ? item.title.substring(0, 17) + "..." : item.title }}
          </span>
        </a>
      </li>

    </ul>
  </el-card>

</template>

<script>
import {getHotSecurityArticlesList} from "@/api/resources/securityArticles.js";
  export default {
    name: 'CardTag',
    data() {
      return {
        queryParams: {
          pageNum: 1,
          pageSize: 2,
        },
        articlesList:[]
      }
    },
    created() {
      this.init();
    },
    methods: {
      init(){
        getHotSecurityArticlesList(this.addDateRange(this.queryParams)).then(response => {
          this.articlesList = response.rows;
        });
      },
      moreTags(type){
        if(type === 'security'){
          this.$router.push({path:'/securityArticles/list'})
        }else if(type === 'antiFraud') {
          this.$router.push({path:'/antiFraudArticles/list'})
        }else {
          this.$router.push({path:'/securityArticles/list'})
        }
      },
      toInfo(id,type){
        if(type === 'security'){
          this.$router.push({path:'/securityArticles/info',query:{id:id}})
        }else if(type === 'antiFraud') {
          this.$router.push({path:'/antiFraudArticles/info',query:{id:id}})
        }else {
          this.$router.push({path:'/securityArticles/info',query:{id:id}})
        }
      }
    }
  }
</script>

<style scoped>
  .me-tag-header {
    font-weight: 600;
  }

  .me-tag-more {
    font-size: 14px;
    color: #78b6f7;
  }

  .me-tag-list {
    list-style-type: none;
  }

  .me-tag-item {
    margin-top: 10px;
    display: inline-block;
    font-size: 14px;
    text-align: left;
  }

  .me-tag-item a:hover {
    text-decoration: underline;
  }

  .moreList{
    padding-right: 16px;
    background: url(../../assets/img/btn_more.png) no-repeat center right 1px;
    line-height: 27px;
    font-size: 14px;
    color: #999;
  }
  .me-tag-item a{
      color: #333;
      text-decoration: none;
  }
</style>
